<script>
    import { createEventDispatcher } from 'svelte';

    const dispatch = createEventDispatcher();

    export let categories = [];
    export let selectedId = null;

    function selectItem(itemId, itemName) {
        dispatch('select', { itemId, itemName });
    }
</script>

<div class="p-4">
    {#each categories as { name, items }}
        <div class="mb-4">
            <h2 class="font-semibold mb-2">{name}</h2>
            <div class="flex flex-wrap gap-2">
                {#each items as item}
                    <button 
                        class="py-2 px-4 border rounded text-blue-600 border-blue-600 hover:bg-blue-100"
                        on:click={() => selectItem(item.id, item.name)}
                    >
                        {item.name}
                    </button>
                {/each}
            </div>
        </div>
    {/each}
</div>
